<template>
  <div class="article">
    <el-button
      @click="show_dialog"
      icon="el-icon-circle-plus"
      type="primary"
      round
      >发布文章</el-button
    >
    <!-- 文章列表 -->
    <el-table :data="article.list" style="width: 100%" @row-click="Opendetails">
      <el-table-column prop="id" label="编号" align="center"> </el-table-column>
      <el-table-column prop="title" label="文章标题" align="center">
      </el-table-column>
      <el-table-column prop="content" label="内容" type="expand" align="center">
        <template v-slot="scope">
          <div v-html="scope.row.content"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop="publishTime"
        :formatter="fmt"
        label="发布时间"
        align="center"
      >
        <template v-slot="scope">
          <!-- | 是管道符，将左侧的变量作为参数传递给右侧的函数 -->
          <div>{{ scope.row.publishTime | dateFMT }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button
            @click.stop="deleteBy(scope.row.id)"
            icon="el-icon-delete-solid"
            type="danger"
            round
            >删除</el-button
          >
          <el-button
            @click.stop="edit_article(scope.row)"
            icon="el-icon-position"
            type="info"
            round
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="obj.pageSize"
        :current-page="obj.page"
        @current-change="change"
        :total="article.total"
      >
      </el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialog_article"
      width="70%"
      :show-close="false"
    >
      <el-form :model="form_article">
        <el-form-item label="文章标题" :label-width="formLabelWidth_article">
          <el-input v-model="form_article.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" :label-width="formLabelWidth_article">
          <Tinymce v-model="form_article.content"></Tinymce>
        </el-form-item>
        <el-form-item label="所属栏目" :label-width="formLabelWidth_article">
          <el-select v-model="form_article.categoryId" placeholder="请选择">
            <el-option
              v-for="item in category"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clear">取 消</el-button>
        <el-button type="primary" @click="save_article">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 导入qs
import qs from "qs";
// 导入moment
import moment from "moment";

import { mapActions, mapState } from "vuex";
// 导入组件
import Tinymce from "../../components/Tinymce";
import { post, get } from "@/utils/request";
export default {
  // 注册组件
  components: {
    Tinymce,
  },
  data() {
    return {
      title: "发布文章",
      obj: {
        page: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,
      dialog_article: false,
      form_article: {},
      formLabelWidth_article: "120px",
      options: [],
    };
  },
  computed: {
    ...mapState("article", ["article", "category"]),
  },
  created() {
    this.page_query();
    this.findAll_category();
  },
  // 监听器
  // 当监听的变量发生变化时，执行监听中的代码
  watch: {
    obj: {
      handler: function () {
        this.page_query();
      },
      deep: true,
    },
  },
  // 过滤器 - 处理日期格式
  filters: {
    dateFMT(str) {
      // var res = moment(str).format('YYYY-MM-DD HH:mm:ss');
      // return res;
      return moment(str).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  methods: {
    Opendetails() {
      console.log(1);
    },
    ...mapActions("article", [
      "findAllCategory",
      "page_query_article",
      "saveOrUpdate",
      "delete_article",
    ]),
    clear() {
      this.dialog_article = false;
      tinyMCE.activeEditor.setContent("");
    },
    // 修改按钮
    edit_article(val) {
      this.title = "修改文章";
      this.dialog_article = true;
      this.form_article = JSON.parse(JSON.stringify(val));
      tinyMCE.activeEditor.setContent(this.form_article.content);
    },
    // 查询所有栏目
    findAll_category() {
      this.findAllCategory();
    },
    // 显示模态框
    show_dialog() {
      this.form_article = {};
      this.title = "发布文章";
      this.dialog_article = true;
      tinyMCE.activeEditor.setContent("");
    },
    // 保存文章
    save_article() {
      this.saveOrUpdate(this.form_article).then((res) => {
        this.dialog_article = false;
        this.page_query();
        this.form_article = {};
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
        }
      });
    },
    fmt(row, column) {
      return moment(row.publishTime).format("YYYY-MM-DD HH:mm:ss");
    },
    // 页码改变
    change(page) {
      this.obj.page = page;
    },
    // 删除文章
    deleteBy(id) {
      this.$confirm("是否删除此篇文章", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let res = await get("/article/deleteById", { id });
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
        }
        this.page_query();
      });
      // this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     this.delete_article({ id }).then(() => {
      //       this.page_query_article(this.obj);
      //     });
      //     this.$message({
      //       type: "success",
      //       message: "删除成功!",
      //     });
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消删除",
      //     });
      //   });
    },
    // 分页查询文章
    page_query() {
      this.page_query_article(this.obj);
    },
  },
};
</script>
<style scoped>
.pagination {
  position: fixed;
  right: 20px;
  bottom: 20px;
}
</style>